<template>
  <div class="login">
    <div class="login-bg">
      <div class="heading">
        <h3>登录管理注册</h3>
      </div>
      <el-form label-width="100px" class="demo-ruleForm" v-bind:rules="rules" ref="ruleForm" v-bind:model="ruleForm">
        <el-form-item  prop="name">
          <el-input type="text" auto-complete="off" v-model="ruleForm.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input type="password" auto-complete="off" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="handleSubmit">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
  export default{
    data () {
      // 姓名验证
      let validatorName = function (rule, value, callback) {
        if (!value) {
          callback(new Error('请输入账号'))
        } else if (!/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/.test(value) || value.length < 6) {
          callback(new Error('账号只能是6位以上中英文或者数字'))
        } else {
          callback()
        }
      }
      // 密码验证
      let validatorPass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'))
        } else if (!/^[A-Za-z0-9]+$/.test(value) || value.length < 6) {
          callback(new Error('密码只能是6位以上英文或者数字'))
        } else {
          callback()
        }
      }
      return {
        // 表单数据
        ruleForm: {
          name: '',
          password: '',
          password2: ''
        },
        // 验证规则
        rules: {
          name: [
            { validator: validatorName, trigger: 'blur' }
          ],
          password: [
            { validator: validatorPass, trigger: 'blur' }
          ]

        }
      }
    },
    methods: {
      // 提交函数
      handleSubmit () {
        // 验证表单
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log('验证通过')
            let user = new this.$AV.User()
            user.setUsername(this.ruleForm.name)
            user.setPassword(this.ruleForm.password)
            // 提交登录
            user.signUp().then(loginedUser => {
              console.log(loginedUser)
            this.$message('成功注册')
            // 注册成功后跳转到登录页面
            this.$router.push('/login')
          }, error => {
              console.log(error)
            })
          } else {
            console.log('验证不通过')
        }
      })
      }

    }


  }

</script>

<style>
.login{
  background: url("./img/top-bar.png") no-repeat;
  padding-top: 200px;
}
.login>.heading>h3{
  font-size: 30px;
  color: #535353;
}
.login>.login-bg{
  width: 360px;
  height:244px;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
}
.login>.login-bg>.heading{
  padding-left:43x;
  margin-bottom: 26px;
}
.login>.login-bg form.el-form{
  margin-left: -99px!important;
}
.login>.login-bg el-button{
  width: 60px;
  margin: 0 auto;
}
.login>.login-bg button{
  width: 359px;
  height:45px;
  font-size: 24px;
  margin-top: 10px;
}
.login>.login-bg .el-input__inner{
  width: 100%;
  height: 45px;
}
.login .el-input{
  width: 100%!important;
}
</style>
